Interactive Map

An interactive map can be used for data that variable across time and space as filters allows for multidimentional analysis

Set Up

[13]:
from observable_jupyter import embed
import pandas as pd
import json

Load and Format Data

[14]:
Manatee_df = pd.read_csv("Demo_Data/Manatee_Carcass_Recovery_Locations_in_Florida.csv", index_col = None)
[15]:
Manatee_df.head()
[15]:
X Y OBJECTID FIELDID REPDATE REPYEAR REPMONTH REPDAY SEX TLENGTH STATE COUNTY LAT LONG_ DCODE MORTALITY created_user created_date last_edited_user last_edited_date
0 -80.117610 26.100406 149433 M7401 1974/04/03 00:00:00+00 1974 4 3 F 260.0 FL Broward 26.100401 -80.117607 9 Undetermined: Other FWC 2021/10/15 11:30:55+00 FWC 2021/10/15 11:30:55+00
1 -80.166435 25.833716 149434 M7402 1974/06/27 00:00:00+00 1974 6 27 M 290.0 FL Miami-Dade 25.833711 -80.166433 1 Human Related: Watercraft Collision FWC 2021/10/15 11:30:55+00 FWC 2021/10/15 11:30:55+00
2 -80.149398 25.931415 149435 M7403 1974/08/20 00:00:00+00 1974 8 20 M 305.0 FL Miami-Dade 25.931411 -80.149396 1 Human Related: Watercraft Collision FWC 2021/10/15 11:30:55+00 FWC 2021/10/15 11:30:55+00
3 -80.830999 28.860008 149436 M001 1974/10/23 00:00:00+00 1974 10 23 F 345.4 FL Volusia 28.860002 -80.830996 3 Human Related: Other FWC 2021/10/15 11:30:55+00 FWC 2021/10/15 11:30:55+00
4 -80.738514 28.400178 149437 M7404 1974/11/11 00:00:00+00 1974 11 11 F 290.0 FL Brevard 28.400173 -80.738511 3 Human Related: Other FWC 2021/10/15 11:30:55+00 FWC 2021/10/15 11:30:55+00

The following block of structures the data into a format accepted by Observable.

[16]:
result = Manatee_df.to_json(orient="records")
parsed = json.loads(result)
data = json.dumps(parsed, indent=4)
Formated_Data = json.loads(data)

Embed your data into the visualization

The Barchart Race visualization consists of two cells:

  1. chart : Depicts the map and the associated data

  2. viewof CountyFilter : Depicts the checklist filter tool

  3. viewof dateLimits : Depicts the date filter

To make your visualization work you will need to access the input variables:

  1. contour : should be set to a geojson file containing the data needed to draw your desired map. The easiest way to do this is to find a git hub repo that contains the data and set contour equal to the raw content of the github repo.

  2. data : Should be set equal to your structured data.

  3. longitude_var : Should be set to the name of the column containing the longitude variable in your data.

  4. latitude_var : Should be set to the name of the column containing the latitude_var variable in your data.

[17]:
embed("@rstorni/voronoi-map-observable-jupyter-with-filters", cells = ["chart", "draw", "viewof CountyFilter", "viewof dateLimits"],
      inputs = {
          'contour' : "https://raw.githubusercontent.com/danielcs88/fl_geo_json/master/geojson-fl-counties-fips.json",
          'data' : Formated_Data,
          'longitude_var' : 'LONG_',
          'latitude_var' : 'LAT',
      }
     )

Images/Thumbnails/Embedding_Demo.png